import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'
import {Modal} from "antd";

import LinkButton from '../link-button'
import './header.less'
import {formateDate} from "../../utils/dateUtils";
import memoryUtils from "../../utils/memoryUtils";
import {reqWeather} from '../../api'
import menuList from '../../config/menuList1'
import storageUtils1 from "../../utils/storageUtils1";

/**
 * 左侧导航的组件
 */

class Header extends Component {

    state = {
        //当前时间字符串格式
        currentTime: formateDate(Date.now()),
        //天气图片url
        dayPictureUrl: '',
        //天气的文本
        weather: '',
    }

    getTime = () =>{
        //每隔1s获取当前时间，并更新状态数据currentTime
        this.intervalId = setInterval(()=>{
            const  currentTime = formateDate(Date.now())
            this.setState({currentTime})
        },1000)
    }

    getWeather = async () => {
        //调用接口请求异步获取数据
        const {dayPictureUrl,weather} = await reqWeather('武穴')
        this.setState({dayPictureUrl,weather})

    }

    getTitle = () =>{
        //得到当前请求路径
        const path = this.props.location.pathname
        let title
        menuList.forEach(item =>{
            //如果当前item对象的key与path一样，item的title就是需要显示的title
            if(item.key === path){
                title = item.title
            }else if (item.children) {
               const cItem = item.children.find(cItem => cItem.key === path)
                //如果有值才说明有匹配的
                if(cItem){
                    //取出它的title
                    title = cItem.title
                }
            }
        })
        return title
    }

    logout = () =>{
        //显示确认框
        Modal.confirm({
            content: '确定退出吗',
            onOk: () =>{
                //删除保存的user数据
                storageUtils1.removeUser()
                memoryUtils.user = {}

                //跳转到首页
                this.props.history.replace('/login')
            },
            onCancel(){
                console.log('Cancel')
            }
        })
    }

    /**
     * 第一次render（）之后执行一次
     * 一般在此执行异步 操作：发生ajax请求/启动定时器
     */
    componentDidMount() {
        //获取当前时间
        this.getTime()
        //获取当前天气
        this.getWeather()
        //得到当前需要显示的title
        this.title = this.getTitle()
    }

    /**
     * 当前组件卸载之前调用
     * @returns {*}
     */
    componentWillMount() {
        //清除定时器
        clearInterval(this.intervalId)
    }

    render() {
        const  {currentTime,dayPictureUrl,weather} = this.state
        const  username = memoryUtils.user.username

        return (
            <div className="header">
                <div className="header-top">
                    <span>欢迎，{username}</span>
                    <LinkButton onClick={this.logout}>退出</LinkButton>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">{this.title}</div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <img src={dayPictureUrl} alt="weather"/>
                        <span>{weather}</span>
                    </div>
                </div>
            </div>
        )
    }

}

//暴漏包装后的组件
export default withRouter(Header)